<template>
    <div>
        <HeaderView></HeaderView>
        <div>
        <!-- <a-row> -->
        <div class="box_nav">
        <a-row>
        <a-col :span="6">
        <!-- <a-col :xl="6"> -->
        <div class=" box_nav_font box_nav_color_one"><div class="one"><span>OPPO Find X5 Pro 天玑Find X5 Pro 天玑版天玑 9000 旗舰 5G 移动平台，80W 超级闪充 + 50W 无线闪充</span></div><p><a href="" class="a_one">W</a><a href="" class="a_one">A</a><a href="" class="a_nav_color">O</a><a href="" class="a_one">N</a><a href="" class="a_one">G</a></p></div></a-col>
        <a-col :span="6"><div class=" box_nav_font box_nav_color_two"><div class="two"><span>2</span></div><p><a href="" class="a_one">C</a><a href="" class="a_one">H</a><a class="a_nav_color">P</a><a href="" class="a_one">A</a><a href="" class="a_one">N</a></p></div></a-col>
        <a-col :span="6"><div class=" box_nav_font box_nav_color_three"><div class="three"><span>3</span></div><p><a href="" class="a_one">W</a><a href="" class="a_one">A</a><a href="" class="a_nav_color">P</a><a href="" class="a_one">N</a><a href="" class="a_one">G</a></p></div></a-col>
        <a-col :span="6"><div class=" box_nav_font box_nav_color_four"><div class="four"><span>4</span></div><p><a href="" class="a_one">Z</a><a href="" class="a_one">H</a><a href="" class="a_nav_color">O</a><a href="" class="a_one">A</a><a href="" class="a_one">N</a></p></div></a-col>
        </a-row>
        </div>
    </div>
    <section class="nav_title_p">
        <div>愿贴心服务成为&emsp;我们友谊的起点</div>
        <div>
            <i class="iconfont icon-sousuo iconfont_sousou"></i>
            <input type="text" placeholder="请输入您的问题">
        </div>
        <div class="nav_oppo_three">
            <p>OPPO会员权益简介&emsp;  OPPO会员日&emsp;  忘记密码的处理方法</p>
        </div>
    </section>
    <FooterView></FooterView>
    </div>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'
import FooterView from '@/components/FooterView.vue'
export default {
    data () {
        return {}
    },
    components: { HeaderView, FooterView }
}
</script>

<style scoped>
*{
    margin:0;
    padding:0;
}
body{
    position: relative;
}

.box_nav{
    position: relative;
}

.box_nav_font{
    position: relative;
    height:500px;
    top:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
}
.box_nav_font p {
    display:inline-block;
    font-size:100px;
    font-weight: 500;
    transform:scale(1,7);
    overflow: hidden;
    letter-spacing:4px;
}
.box_nav_font a{
    /* display:; */
    text-decoration: none;

    color:rgb(48, 93, 48);
}

.box_nav_color_one:hover{
    background-color: aqua;
}
.box_nav_color_two:hover{
    background-color: goldenrod;
}
.box_nav_color_three:hover{
    background-color: yellowgreen;
}
.box_nav_color_four:hover{
    background-color: tomato;
}
.one,.two,.four,.three{
    width:300px;
    height: 230px;
    position:absolute;
    background-color: rgba(51, 48, 51,0.5);
    top:0;
    left:0;
    z-index: 20;
    display:none;
    border-radius:0 15px 15px 0;
    /* transition: display 20s;transition:all 1s; */
}
.box_nav_color_one,.box_nav_color_two,.box_nav_color_four,.box_nav_color_three{
    transition:all 1s;
}
.box_nav_color_one:hover .one{
    display:block;
}
.box_nav_color_one .one{
    transition: all 20s;
}
.box_nav_color_two:hover .two{
    display:block;
}

.box_nav_color_three:hover .three{
    display:block;
}
.box_nav_color_four:hover .four{
    display:block;
}

.one,.two,.four,.three span{
    font-size: 18px;
    color:rgb(205, 205, 205);
}
.box_nav_color_one:hover  .a_nav_color{
   display: inline-block;
   transform:scale(4.2,0.8);
}
.box_nav_color_one:hover .a_one{
    opacity: 0;
}
.box_nav_color_two:hover .a_nav_color {
    display:inline-block;
   transform:scale(4.2,0.8);
   /* transform:translate(0,150px)
    */
    position:absolute;
    right:100px;
}
.box_nav_color_two:hover .a_one{
    opacity: 0;
}
.box_nav_color_three:hover .a_nav_color{
    display: inline-block;
   transform:scale(4.2,0.8);
   position:absolute;
   right:85px;
}
.box_nav_color_three:hover .a_one{
    opacity: 0;
}
.box_nav_color_four:hover .a_nav_color {
    display: inline-block;
   transform:scale(4.2,0.8);
}
.box_nav_color_four:hover .a_one{
    opacity: 0;
}
.nav_title{
    position:absolute;
}
.nav_title_p {
    position: absolute;
    top:250px;
    left:540px;
    z-index:40;
    display:flex;
    flex-wrap: wrap;
    width:400px;
    font-size:50px;
    font-weight:600;
    color:rgb(161, 161, 161);
}
.nav_title_p input {
    position:absolute;
    left:-79px;
    width:500px;
    top:150px;
    background-color: rgba(0, 0, 0, 0.1);
    color:black;
    border-radius:15px;
    padding-left:100px;
    cursor:pointer;
}
.iconfont_sousou{
    font-size:50px !important;
    position: relative;
    right:48px;
    top:10px;
    color:black;
    /* outline:none; */
}
.nav_oppo_three{
    position:absolute;
    left:-75px;
    top:230px;
    font-size:18px;
    color:black;
    /* flex-wrap:nowrap; */
}
</style>
